<!-- Page header -->
<div class="page-header d-print-none">
    <div class="container-xl">
        <div class="row g-2 align-items-center">
            <div class="col">
                <h2 class="page-title">
                    浏览记录
                </h2>
            </div>
            <div class="col-auto ms-auto d-print-none">
                <div class="btn-list history_delete">
                    <a  href="javascript:void(0);" class="btn btn-danger d-none d-sm-inline-block">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash-x-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16zm-9.489 5.14a1 1 0 0 0 -1.218 1.567l1.292 1.293l-1.292 1.293l-.083 .094a1 1 0 0 0 1.497 1.32l1.293 -1.292l1.293 1.292l.094 .083a1 1 0 0 0 1.32 -1.497l-1.292 -1.293l1.292 -1.293l.083 -.094a1 1 0 0 0 -1.497 -1.32l-1.293 1.292l-1.293 -1.292l-.094 -.083z" stroke-width="0" fill="currentColor" /><path d="M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z" stroke-width="0" fill="currentColor" /></svg>
                        删除
                    </a>
                </div>
                <div class="btn-list">
                    <a  href="javascript:void(0);" class="btn btn-danger determine_delete" style="display: none;">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash-x-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16zm-9.489 5.14a1 1 0 0 0 -1.218 1.567l1.292 1.293l-1.292 1.293l-.083 .094a1 1 0 0 0 1.497 1.32l1.293 -1.292l1.293 1.292l.094 .083a1 1 0 0 0 1.32 -1.497l-1.292 -1.293l1.292 -1.293l.083 -.094a1 1 0 0 0 -1.497 -1.32l-1.293 1.292l-1.293 -1.292l-.094 -.083z" stroke-width="0" fill="currentColor" /><path d="M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z" stroke-width="0" fill="currentColor" /></svg>
                        确认删除
                    </a>
                    <a href="javascript:void(0);" class="btn btn-primary cancel_delete" style="display: none;">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash-x-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16zm-9.489 5.14a1 1 0 0 0 -1.218 1.567l1.292 1.293l-1.292 1.293l-.083 .094a1 1 0 0 0 1.497 1.32l1.293 -1.292l1.293 1.292l.094 .083a1 1 0 0 0 1.32 -1.497l-1.292 -1.293l1.292 -1.293l.083 -.094a1 1 0 0 0 -1.497 -1.32l-1.293 1.292l-1.293 -1.292l-.094 -.083z" stroke-width="0" fill="currentColor" /><path d="M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z" stroke-width="0" fill="currentColor" /></svg>
                        取消
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Page body -->
<div class="page-body">
    <div class="container-xl">
        <div class="row justify-content-center">
            <!-- 显示列表的宽度 -->
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="divide-y" id="article-items-body">

                            <!-- <div class="d-flex align-items-center">
                                <div class="ms">

                                    <div class="text-truncate">
                                        <a href="javascript:void(0);" class="history_article_list_a_title">
                                        <strong>标题</strong>
                                        </a>
                                    </div>
                                    <div class="text-muted mt-2">
                                    <div class="row">
                                        <ul class="list-inline list-inline-dots mb-0">
                                        <li class="list-inline-item">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user"
                                        width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                                        fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                        <path d="M12 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>
                                        <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
                                        </svg>
                                        昵称
                                        </li>
                                        <li class="list-inline-item">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-history" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 8l0 4l2 2" /><path d="M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5" /></svg>
                                        时间
                                        </li>
                                        </ul>
                                    </div>
                                    </div>

                                </div>
                                <div class="ms-auto">
                                    <input type="checkbox" style="display: none;">
                                </div>
                            </div> -->

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
  $(function () {
    $.ajax({
      url: '/history/getHistory',
      type: 'get',
      success: function(respData) {
        if (respData.code == 0) {
          buildHistoryArticle(respData.data);
        } else {
          $.toast({
            heading: '警告',
            text: respData.message,
            icon: 'warning'
          });
        }
      },
      error : function() {
        $.toast({
            heading: '错误  ',
            text: '访问出现问题，请与管理员联系.',
            icon: 'error'
          });
      }
    });

    let deleteArray = [];

    function buildHistoryArticle(data) {
        if (data.length == 0) {
	        $('#article-items-body').html('还没有记录');
	        return;
        }

        // 构建帖子列表
        data.forEach(history => {
            // 构造HTML
            let articleHtmlStr = ' <div class="d-flex align-items-center"> '
            + ' <div class="ms"> '

            + ' <div class="text-truncate"> '
            + ' <a href="javascript:void(0);" class="history_article_list_a_title"> '
            + ' <strong>' + history.title + '</strong> '
            + ' </a> '
            + ' </div> '
            + ' <div class="text-muted mt-2"> '
            + ' <div class="row"> '
            + ' <ul class="list-inline list-inline-dots mb-0"> '
            + ' <li class="list-inline-item"> '
            + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" '
            + ' width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" '
            + ' fill="none" stroke-linecap="round" stroke-linejoin="round"> '
            + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> '
            + ' <path d="M12 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path> '
            + ' <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path> '
            + ' </svg> '
            + history.nickname
            + ' </li> '
            + ' <li class="list-inline-item"> '
            + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-history" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 8l0 4l2 2" /><path d="M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5" /></svg> '
            + history.updateTime
            + ' </li> '
            + ' </ul> '
            + ' </div> '
            + ' </div> '
            + ' </div> '
            + ' <div class="ms-auto"> '
            + ' <input type="checkbox" style="display: none;" class="input"> '
            + ' </div> '
            + ' </div> '

            // 转为元素对象
            let articleItem = $(articleHtmlStr);
            // 获取标题的 a 标签
            let articleTitle = articleItem.find('.history_article_list_a_title');
            // 处理标题点击事件
            articleTitle.click(function() {
                // 通过全局变量保存当前访问的帖子信息
                currentArticle = {id: history.articleId};
                $('#forum-content').load('details.html');
            });

            // 获取选择框
            let checkbox = articleItem.find('input');

            checkbox.change(function() {
                // 判断复选框是否被选中
                let isChecked = checkbox.is(":checked");
                if (isChecked) {
                    console.log("选中：", history.id);
                    deleteArray.push(history.id);
                } else {
                    console.log("取消选中：", history.id);
                    let index = deleteArray.indexOf(history.id);
                    if (index != -1) {
                        deleteArray.splice(index, 1);
                    }
                }
                console.log(deleteArray);
            })
            
            // 添加到列表
            $('#article-items-body').append(articleItem);
        });
    }

    // 删除按钮点击事件
    $('.history_delete').click(function() {
        $('.history_delete').hide();
        $('.determine_delete').show();
        $('.cancel_delete').show();

        let checkboxList = $('.input');
        checkboxList.show();

        // 将数组清空
        deleteArray.length = 0;

        // 确认删除按钮
        $('.determine_delete').click(function() {
            // 判断是否选择了删除对象
            if (deleteArray.length == 0) {
                $.toast({
                    heading: '错误',
                    text: '请先勾选要删除的记录!',
                    icon: 'error'
                });
                return;
            }

            // 发送请求
            $.ajax({
                type: 'post',
                url: '/history/delete',
                contentType: "application/json",
                data: JSON.stringify(deleteArray),
                success: function(respData) {
                    if (respData.code == 0) {
                        // 提示成功信息
                        $.toast({
                            heading: '成功',
                            text: '删除成功!',
                            icon: 'success'
                        });
                        // 重新加载
                        $('#forum-content').load('history.html');
                    } else {
                        // 提示失败信息
                        $.toast({
                            heading: '警告',
                            text: respData.message,
                            icon: 'warning'
                        });
                    }
                },
                error: function() {
                    // HTTP 请求错误
                    $.toast({
                        heading: '错误',
                        text: '访问出现问题，请与管理员联系.',
                        icon: 'error'
                    });
                }
            });
        })

        // 取消按钮
        $('.cancel_delete').click(function() {
            // 页面显示按钮的变化
            $('.history_delete').show();
            $('.determine_delete').hide();
            $('.cancel_delete').hide();
            let checkboxList = $('.input');
            checkboxList.prop("checked", false);
            checkboxList.hide();
        });


    });
    
  });
</script>